<template>
  <view class="goods-item" @click="toGoodsDetail">
    <image class="goods-item-img" :src="goodsItem.goods_big_logo" mode=""></image>
    <view class="goods-item-info">
      <text class="name">{{goodsItem.goods_name}}</text>
      <text class="desc">{{goodsItem.goods_name}}</text>
      <text class="price">￥{{goodsItem.goods_price}}</text>
    </view>
  </view>
</template>

<script setup>
  const props = defineProps({
    goodsItem: {
      type: Object,
      default: () => ({})
    }
  })
  const toGoodsDetail = () => {
    uni.navigateTo({
      url:'/subpkg/goods_detail/goods_detail?cid=' + props.goodsItem.cat_id
    })
  }
</script>

<style lang="scss">
.goods-item {
  height: 480rpx;
  width: 350rpx;
  background: #fff;
  .goods-item-img {
    width: 100%;
    height: 320rpx;
  }
  .goods-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 10rpx;
    .name,.desc {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .name {
      font-size: 38rpx;
      font-weight: 600;
    }
    .desc {
      color: #333;
      margin: 5rpx 0;
    }
    .price {
      font-size: 35rpx;
      color: red;
    }
  }
}
</style>